<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="addCheck()">添加盘点信息</el-button>
    <!--数据展示-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="checkId"
                label="盘点编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="storesName.storesName"
                label="门店名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="checkdate"
                label="盘点日期"
                width="120">
        </el-table-column>
        <el-table-column
                prop="ckauditor"
                label="盘点审核人"
                width="180">
        </el-table-column>
        <el-table-column
                prop="auditordate"
                label="审核日期"
                width="120">
        </el-table-column>
        <el-table-column
                prop="handle"
                label="操作"
                width="">
            <template slot-scope="scope">
                <el-button type="success" @click="details(scope.row.checkId)">查看详情</el-button>
                <el-button type="danger" @click="deleteCheckinfo(scope.row.checkId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分叶-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=currentPage
            :page-sizes="pageSizes"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>
    <!--批量添加-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible1">

        <div style="margin-top: 20px">
            <template>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="checkId"
                            label="盘点编号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="storesName.storesName"
                            label="门店名称"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="checkdate"
                            label="盘点日期"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="ckauditor"
                            label="盘点审核人"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="审核日期"
                            label="auditordate"
                            show-overflow-tooltip>
                    </el-table-column>



                </el-table>

            </template>
            <div slot="footer" class="dialog-footer">
                <el-button @click="toggleSelection()">取消选择</el-button>
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm1()">确 定</el-button>
            </div>
        </div>

    </el-dialog>
<!--查看详情-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible2">

        <div style="margin-top: 20px">
            <template>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="checkId"
                            label="盘点编号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="storesName.storesName"
                            label="门店名称"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="checkdate"
                            label="盘点日期"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="ckauditor"
                            label="盘点审核人"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="审核日期"
                            label="auditordate"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>

            </template>
            <div slot="footer" class="dialog-footer">
                <el-button @click="toggleSelection()">取消选择</el-button>
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm1()">确 定</el-button>
            </div>
        </div>

    </el-dialog>
    <!--添加-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form"  ref="form">
            <el-form-item label="选择分店" prop="storesId" >
                <el-select v-model="form.storesId" placeholder="请选择">
                    <el-option
                            v-for="item in lists"
                            :key="item.storesId"
                            :label="item.storesName"
                            :value="item.storesId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="盘点人" prop="checkname" >
                <el-input v-model="form.checkname" size="mini"></el-input>
            </el-form-item>
            </el-form-item>
            <el-form-item label="盘点日期" prop="checkdate" >
                <el-date-picker type="date" size="mini" v-model="form.checkdate" autocomplete="off" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="盘点审核人" prop="ckauditor" >
                <el-input v-model="form.ckauditor" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="审核日期" prop="auditordate">
                <el-date-picker type="date" size="mini" v-model="form.auditordate" autocomplete="off" style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm1()">确 定</el-button>
            </div>

    </el-dialog>
</div>
</body>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                pageSizes:[1,2,3,4,5,6,7,8,9],
                currentPage: 1,
                pageSize: 5,
                total:0,
                tableData: [],
                searchForm: {},
                form: {},
                title: "",
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                cateDate: [],
                tableData1: [],
                multipleSelection:[],
                addCount:"",
                lists:[]
            }
        },
        created: function () { //初始化方法 类似于jquery  $({})
            this.loadData();
        },
        methods: {
            //定义所有元素绑定的方法
            loadData() {
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/check/listAllCheckinfo', {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm
                })  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            //每页数量发生变化执行方法
            handleSizeChange(val) {
                this.pageSize = val;
                //再次请求，加载数据
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                //再次请求，加载数据
                this.loadData();
            },
            search() {
                //直接调用重新请求，加载数据方法
                this.loadData();
            },
            addCheck() {
                //让_this等于当前vue对象
                var _this = this;
                this.title = "添加",
                    //赋值 axios官网代码
                    axios.get('/check/addInfoCheckinfo')  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            // handle success
                            console.log(response);
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            // this.tableData
                            //判断返回值是否正确
                            if (response.data.code == 200) {
                                _this.cateDate = response.data.data;
                                //重新加载数据
                                _this.loadData();
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })
                        .then(function () {//总执行 最终处理      类似java  异常处理的finally
                            // always executed
                        });
                axios.get('/check/listStores')  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.lists = response.data.data;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
                _this.dialogFormVisible = true;
            },
            details(id) {
                axios.get("/check/getById?checkId="+id) //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.cateDate = response.data.data;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });

                this.dialogFormVisible2 = true;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteCheckinfo(id) {
                console.log(id);
                //确认框提示
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //让_this等于当前vue对象
                    var _this = this;
                    //alert(111);
                    //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                    axios.delete("/check/deleteCheckinfo?checkId=" + id)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            // handle success
                            console.log(response);
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            // this.tableData
                            //判断返回值是否正确
                            if (response.data.code == 200) {
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            } else {
                                //重新加载数据
                                _this.loadData();
                                //错误提示信息
                                _this.$message.error('错了哦，这是一条错误消息');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addAddintos() {
                app.dialogFormVisible1 = true;
            },

            submitForm1(){
                axios.post('/check/addinfoCheckinfo',this.form)  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        //判断返回值是否正确
                        // if (response.data.code == 200) {
                        //
                        // }
                    });
                //关闭弹框
                app.dialogFormVisible = false;
            }
        }

    })
</script>
</html>